<script setup>
import { ref, onMounted, onBeforeUnmount, reactive, inject, nextTick, watch } from "vue"
import { Plus, Edit, Check, Close, CheckCorrect, Stretching, Magic } from "@icon-park/vue-next"
import { getUUID, debounce } from "@/utils/common"
import { message, Tooltip } from "ant-design-vue"
import { Store } from "@tauri-apps/plugin-store"
import codeM from "@/components/code.vue"

const globalVars = inject("globalVars")

const leftKuang = ref(null)
const rightKuang = ref(null)
const middleKuang = ref(null)
let store = null
const isDragging = ref(false)
const startX = ref(0)
const startWidth = ref(0)
const state = reactive({
    list: [],
    itemInfo: {},
    isInNew: false,
    itemOption: "基本信息",
    itemOptions: [
        "基本信息",
        "接口列表",
        "环境变量",
        "全局变量",
        "全局参数",
        "前置配置",
        "后置配置",
        "标签配置",
        "删除项目",
    ],
    apiSearch: "",
    tagSelect: [],
    tagOptions: [],
    openApiKeys: [],
    api: {
        open: false,
        id: "",
        name: "",
        method: "GET",
        tag: [],
        desc: "",
        path: "",
    },
    hiddenAll: false,
    env: {},
    global: {},
    ppp2: 100,
    evSelectedRowKeys: [],
    gvSelectedRowKeys: [],
    params: {
        select: "params",
        options: ["params", "body", "headers"],
        pSelectedRowKeys: [],
        hSelectedRowKeys: [],
        bSelectedRowKeys: [],
    },
    tag: {
        open: false,
    },
})
const variableColumns = [
    {
        title: "变量名",
        dataIndex: "name",
        align: "center",
    },
    {
        title: "值",
        dataIndex: "value",
        align: "center",
    },
    {
        title: "说明",
        dataIndex: "desc",
        align: "center",
    },
    {
        title: "操作",
        dataIndex: "opt",
        align: "center",
        width: 70,
    },
]
const paramsColumns = [
    {
        title: "参数名",
        dataIndex: "name",
        align: "center",
        width: 200,
        fixed: "left",
    },
    {
        title: "参数值",
        dataIndex: "value",
        align: "center",
    },
    {
        title: "编码",
        dataIndex: "isEncode",
        align: "center",
        width: 60,
    },
    {
        title: "必填",
        dataIndex: "isMust",
        align: "center",
        width: 60,
    },
    {
        title: "说明",
        dataIndex: "desc",
        align: "center",
        width: 200,
    },

    {
        title: "操作",
        dataIndex: "opt",
        align: "center",
        width: 60,
        fixed: "right",
    },
]
const headersColumns = [
    {
        title: "参数名",
        dataIndex: "name",
        align: "center",
    },
    {
        title: "参数值",
        dataIndex: "value",
        align: "center",
    },
    {
        title: "说明",
        dataIndex: "desc",
        align: "center",
    },
    {
        title: "操作",
        dataIndex: "opt",
        align: "center",
        width: 60,
    },
]
const tagsColumns = [
    {
        title: "标签名",
        dataIndex: "name",
        align: "center",
    },
    {
        title: "颜色",
        dataIndex: "color",
        align: "center",
    },
    {
        title: "预览",
        dataIndex: "show",
        align: "center",
    },
    {
        title: "描述",
        dataIndex: "desc",
        align: "center",
        ellipsis: true,
        width: 200,
    },

    {
        title: "操作",
        dataIndex: "opt",
        align: "center",
        width: 120,
    },
]

const onMouseDown = (e) => {
    isDragging.value = true
    startX.value = e.clientX
    startWidth.value = leftKuang.value.offsetWidth
    document.addEventListener("mousemove", onMouseMove)
    document.addEventListener("mouseup", onMouseUp)
    store.set("api_move", { startX: startX.value, startWidth: startWidth.value })
}

const onMouseMove = (e) => {
    if (!isDragging.value) return
    const newWidth = startWidth.value + (e.clientX - startX.value)
    if (newWidth < 180) {
        leftKuang.value.style.width = `180px`
        rightKuang.value.style.width = `calc(100% - 180px)`
        return
    }
    const windows_width = document.body.clientWidth
    if ((newWidth * 100) / windows_width > 80) {
        leftKuang.value.style.width = `80%`
        rightKuang.value.style.width = `20%`
        return
    }
    leftKuang.value.style.width = `${newWidth}px`
    rightKuang.value.style.width = `calc(100% - ${newWidth}px)`
}

const onMouseUp = () => {
    isDragging.value = false
    document.removeEventListener("mousemove", onMouseMove)
    document.removeEventListener("mouseup", onMouseUp)
}

onMounted(async () => {
    middleKuang.value.addEventListener("mousedown", onMouseDown)
    store = await Store.get("store.json")
    const da = await store.get("item_list")
    if (!da) {
        await store.set("item_list", [])
        state.list = []
    } else {
        state.list = da
    }
    const api_move = await store.get("api_move")
    if (api_move) {
        startX.value = api_move.startX
        startWidth.value = api_move.startWidth
    }

    const lastSelectItem = await store.get("lastSelectItem")
    if (lastSelectItem) {
        getItemInfo(lastSelectItem, false)
    }
    nextTick(() => {
        state.ppp2 = rightKuang.value.offsetHeight - 300
    })
    window.addEventListener("resize", () => {
        state.ppp2 = rightKuang.value.offsetHeight - 300
        nextTick(() => {
            if (isDragging.value) {
                onMouseMove({ clientX: startX.value })
            }
        })
    })
})

onBeforeUnmount(() => {
    middleKuang.value.removeEventListener("mousedown", onMouseDown)
})
async function saveItemInfo() {
    if (state.itemInfo.name == "") {
        message.error("项目名称不能为空")
        return
    }
    state.itemInfo.name = state.itemInfo.name.replace(/\s+/g, "")
    for (let i = 0; i < state.list.length; i++) {
        if (state.list[i].name == state.itemInfo.name) {
            message.error("项目名称已存在")
            return
        }
    }
    await store.set("item_" + state.itemInfo.id, state.itemInfo)
    globalVars.changeItemId = state.itemInfo.id + "_i_" + new Date().getTime()
    if (state.isInNew) {
        state.list.push({ ...state.itemInfo })
        state.isInNew = false
    } else {
        for (let i = 0; i < state.list.length; i++) {
            if (state.list[i].id == state.itemInfo.id) {
                state.list[i] = { ...state.itemInfo }
                break
            }
        }
    }
    await store.set("item_list", state.list)

    message.success("保存成功")
    await store.set("lastSelectItem", state.itemInfo.id)
}
async function backItemInfo() {
    if (state.isInNew) {
        state.itemInfo.name = ""
        state.itemInfo.desc = ""
        return
    }
    state.itemInfo = await store.get("item_" + state.itemInfo.id)
}
async function handleApiOpenChange(keys) {
    if (keys.length == 0) {
        state.openApiKeys = []
        return
    } else {
        let templist = []
        for (let i = 0; i < keys.length; i++) {
            const nowKey = keys[i]
            for (let j = 0; j < state.itemInfo.apiList.length; j++) {
                console.log(state.itemInfo.apiList[j].id)
                if (state.itemInfo.apiList[j].id == nowKey && state.itemInfo.apiList[j].status) {
                    templist.push(nowKey)
                }
            }
        }
        state.openApiKeys = templist
    }
}

function apiOpenSwitch(id) {
    const api = state.itemInfo.apiList[id]
    if (!api.status) {
        let templist = []
        for (let i = 0; i < state.openApiKeys.length; i++) {
            if (state.openApiKeys[i] !== api.id) {
                templist.push(api.id)
            }
        }
        state.openApiKeys = templist
    }
}

const labelCol = {
    style: {
        width: "100px",
    },
}
const wrapperCol = {
    span: 14,
}
async function getItemInfo(id, saveLast = true) {
    const item = await store.get("item_" + id)
    if (!item) {
        message.error("项目不存在")
        store.delete("lastSelectItem")
        return
    }
    state.itemInfo = item
    state.isInNew = false
    state.itemOption = "接口列表"
    state.apiSearch = ""
    state.tagSelect = []
    state.tagOptions = []
    state.openApiKeys = []
    state.env = { select: { ...item.env.default, status: true } }
    state.global = {
        variable: [...item.global.variable],
        params: [...item.global.params],
        headers: [...item.global.headers],
        body: [...item.global.body],
    }
    state.evSelectedRowKeys = []
    for (let i = 0; i < state.env.select.variable.length; i++) {
        if (state.env.select.variable[i].status) {
            state.evSelectedRowKeys.push(state.env.select.variable[i].key)
        }
    }
    state.gvSelectedRowKeys = []
    for (let i = 0; i < state.global.variable.length; i++) {
        if (state.global.variable[i].status) {
            state.gvSelectedRowKeys.push(state.global.variable[i].key)
        }
    }
    state.params.pSelectedRowKeys = []
    for (let i = 0; i < state.global.params.length; i++) {
        if (state.global.params[i].status) {
            state.params.pSelectedRowKeys.push(state.global.params[i].key)
        }
    }
    state.params.hSelectedRowKeys = []
    for (let i = 0; i < state.global.headers.length; i++) {
        if (state.global.headers[i].status) {
            state.params.hSelectedRowKeys.push(state.global.headers[i].key)
        }
    }
    state.params.bSelectedRowKeys = []
    for (let i = 0; i < state.global.body.length; i++) {
        if (state.global.body[i].status) {
            state.params.bSelectedRowKeys.push(state.global.body[i].key)
        }
    }

    if (saveLast) {
        store.set("lastSelectItem", state.itemInfo.id)
    }
}
function getNewItem() {
    return {
        id: getUUID(),
        name: "",
        desc: "",
        apiList: [],
        status: true,
        tag: [],
        before: [{ status: true, text: "" }],
        after: [{ status: true, text: "" }],
        env: {
            default: {
                label: "初始环境",
                value: "初始环境",
                path: "",
                variable: [{ status: false, key: getUUID(), name: "", value: "", desc: "", isInner: true }],
                id: "defaultid",
                status: true,
            },
            all: [
                {
                    label: "初始环境",
                    value: "初始环境",
                    path: "",
                    variable: [{ status: false, key: getUUID(), name: "", value: "", desc: "", isInner: true }],
                    id: "defaultid",
                    status: true,
                },
            ],
        },
        global: {
            variable: [
                {
                    status: false,
                    key: getUUID(),
                    name: "",
                    value: "",
                    desc: "",
                    isInner: true,
                },
            ],
            params: [
                {
                    status: false,
                    key: getUUID(),
                    name: "",
                    value: "",
                    desc: "",
                    isMust: false,
                    isInner: true,
                    isEncode: false,
                },
            ],
            headers: [
                {
                    status: true,
                    key: getUUID(),
                    name: "xfrom",
                    value: "t2",
                    desc: "标注请求来源，可删除",
                    isMust: false,
                    isInner: false,
                    isEncode: false,
                },
                {
                    status: false,
                    key: getUUID(),
                    name: "",
                    value: "",
                    desc: "",
                    isMust: false,
                    isInner: true,
                    isEncode: false,
                },
            ],
            body: [
                {
                    status: false,
                    key: getUUID(),
                    name: "",
                    value: "",
                    desc: "",
                    isMust: false,
                    isInner: true,
                    isEncode: false,
                },
            ],
        },
        advanced: {},
    }
}
function renameApi(item) {
    const newName = item.backupName.trim()
    if (newName == "") {
        message.error("接口名称不能为空")
        return
    }
    if (newName == item.name) {
        item.backupName = ""
        item.rename = false
        return
    }
    item.name = newName
    item.backupName = ""
    item.rename = false
    //保存项目中的接口
    store.set(`item_${state.itemInfo.id}`, { ...state.itemInfo })
    //保存接口本身
    // 获取接口本身，修改名字后保存
    store.get(`api_${state.itemInfo.id}_${item.id}`).then((res) => {
        res.name = item.name
        store.set(`api_${state.itemInfo.id}_${item.id}`, res)
    })
    globalVars.renameLike(item.id, `${state.itemInfo.name}-${item.name}`)
}
function newApi() {
    state.api = {
        id: getUUID(),
        name: "",
        method: "GET",
        tag: [],
        desc: "",
        path: "",
        open: true,
        status: true,
    }
}

const saveBefore = debounce((value) => {
    state.itemInfo.before[0].text = value
    store.set("item_" + state.itemInfo.id, { ...state.itemInfo }).then(() => {
        globalVars.changeItemId = state.itemInfo.id + "_i_" + new Date().getTime()
    })
})

const saveAfter = debounce((value) => {
    state.itemInfo.after[0].text = value
    store.set("item_" + state.itemInfo.id, { ...state.itemInfo }).then(() => {
        globalVars.changeItemId = state.itemInfo.id + "_i_" + new Date().getTime()
    })
})

function openApiPage(item) {
    globalVars.addPane("api_info_#_" + item.id, state.itemInfo.name + "-" + item.name, true, false, {
        api: item,
        item: state.itemInfo,
    })
}
function getEnvInfo(item) {
    if (state.env.select.id == item.id) {
        return
    }
    state.env.select = { ...item, isNew: false }
}
async function saveNewApiOk() {
    state.api.name = state.api.name.replace(/\s+/g, "")
    if (state.api.name == "") {
        message.error("接口名称不能为空")
        return
    }
    state.api.path = state.api.path.replace(/\s+/g, "")
    if (state.api.path == "") {
        message.error("接口路径不能为空")
        return
    }
    if (
        state.api.path.indexOf("/") != 0 &&
        state.api.path.indexOf("http://") != 0 &&
        state.api.path.indexOf("https://") != 0
    ) {
        message.error("接口路径不合法")
        return
    }
    if (!state.itemInfo.apiList) {
        state.itemInfo.apiList = []
    }
    for (let i = 0; i < state.itemInfo.apiList.length; i++) {
        if (state.itemInfo.apiList[i].name == state.api.name) {
            message.error("接口名称已存在")
            return
        }
    }
    state.api.children = []
    state.itemInfo.apiList.push({ ...state.api })
    state.api.open = false
    store.set("item_" + state.itemInfo.id, { ...state.itemInfo }).then(() => {
        globalVars.changeItemId = state.itemInfo.id + "_i_" + new Date().getTime()
    })
    store.set(`api_${state.itemInfo.id}_${state.api.id}`, { ...state.api })
    message.success("新增成功")
}
async function selectTags(v) {}
async function delApi(id) {
    state.itemInfo.apiList = state.itemInfo.apiList.filter((item) => item.id != id)
    store.set("item_" + state.itemInfo.id, { ...state.itemInfo }).then(() => {
        globalVars.changeItemId = state.itemInfo.id + "_i_" + new Date().getTime()
    })
    store.delete(`api_${state.itemInfo.id}_${id}`)
    message.success("删除成功")
}
async function delItem() {
    //删除项目下的所有接口

    state.itemInfo.apiList?.forEach((item) => {
        store.delete(`api_${state.itemInfo.id}_${item.id}`)
        globalVars.removePaneLike(item.id)
    })
    // 删除窗口
    globalVars.removePaneLike(state.itemInfo.id)

    state.list = state.list.filter((item) => item.id != state.itemInfo.id)
    store.set("item_list", state.list)
    store.delete("item_" + state.itemInfo.id)
    state.itemInfo = {}
    state.isInNew = false
    message.success("删除成功")
}

async function addItem() {
    if (state.isInNew) {
        message.error("请先保存当前项目")
        return
    }
    state.itemOption = "基本信息"
    state.isInNew = true
    state.itemInfo = getNewItem()
    state.env = { select: { ...state.itemInfo.env.default, status: true } }
    state.global = {
        variable: [...state.itemInfo.global.variable],
        params: [...state.itemInfo.global.params],
        headers: [...state.itemInfo.global.headers],
        body: [...state.itemInfo.global.body],
    }
}
async function changeEnvDefault() {
    if (state.env.select.id == state.itemInfo.env.default.id) {
        state.env.select.status = true
        message.warning("默认勾选不能取消，只能在其他环境切换")
        return
    }
}
function addEnv() {
    state.env.select = {
        label: "",
        value: "",
        status: false,
        path: "",
        variable: [{ status: false, key: getUUID(), name: "", value: "", desc: "", isInner: true }],
        isNew: true,
        id: getUUID(),
    }
}
async function saveEnv() {
    if (state.env.select.value == "") {
        message.error("环境名称不能为空")
        return
    }

    state.env.select.value = state.env.select.value.replace(/\s+/g, "")
    state.env.select.label = state.env.select.value
    for (let i = 0; i < state.itemInfo.env.all.length; i++) {
        if (
            state.itemInfo.env.all[i].id != state.env.select.id &&
            state.itemInfo.env.all[i].value == state.env.select.value
        ) {
            message.error("环境名称已存在")
            return
        }
    }
    let tempset = {}
    for (let i = 0; i < state.env.select.variable.length; i++) {
        if (state.env.select.variable[i].name.trim() == "" && state.env.select.variable[i].status) {
            message.error("变量名不能为空")
            return
        }
        if (state.env.select.variable[i].status) {
            if (tempset[state.env.select.variable[i].name]) {
                message.error(state.env.select.variable[i].name + ":变量名重复")
                return
            }
            tempset[state.env.select.variable[i].name] = true
        }
    }
    if (state.env.select.isNew) {
        state.env.select.isNew = false
        state.itemInfo.env.all.push({ ...state.env.select, variable: [...state.env.select.variable] })
    } else {
        for (let i = 0; i < state.itemInfo.env.all.length; i++) {
            if (state.itemInfo.env.all[i].id == state.env.select.id) {
                state.itemInfo.env.all[i] = { ...state.env.select, variable: [...state.env.select.variable] }
                break
            }
        }
    }
    if (state.env.select.status && state.env.select.id != state.itemInfo.env.default.id) {
        for (let i = 0; i < state.itemInfo.env.all.length; i++) {
            if (state.itemInfo.env.all[i].id == state.itemInfo.env.default.id) {
                state.itemInfo.env.all[i].status = false
                break
            }
        }
        state.itemInfo.env.default = { ...state.env.select, variable: [...state.env.select.variable] }
    }

    store.set("item_" + state.itemInfo.id, { ...state.itemInfo }).then(() => {
        globalVars.changeItemId = state.itemInfo.id + "_i_" + new Date().getTime()
    })
    message.success("保存成功")
}
function backupEnv() {
    store.get("item_" + state.itemInfo.id).then((res) => {
        state.itemInfo.env.all = [...res.env.all]
        console.log(state.itemInfo.env.all, state.env.select)
        for (let i = 0; i < state.itemInfo.env.all.length; i++) {
            if (state.itemInfo.env.all[i].id == state.env.select.id) {
                console.log(state.itemInfo.env.all[i])
                state.env.select = { ...state.itemInfo.env.all[i] }
                message.success("还原成功")
                break
            }
        }
    })
}
async function delEnv() {
    if (state.env.select.id == state.itemInfo.env.default.id) {
        message.error("初始环境不能删除")
        return
    }
    state.itemInfo.env.all = state.itemInfo.env.all.filter((item) => item.id != state.env.select.id)
    store.set("item_" + state.itemInfo.id, { ...state.itemInfo }).then(() => {
        globalVars.changeItemId = state.itemInfo.id + "_i_" + new Date().getTime()
    })
    message.success("删除成功")
    getEnvInfo(state.itemInfo.env.default)
}
function onSelectEnvVariableChange(keys) {
    if (keys.indexOf("") == -1) {
        state.evSelectedRowKeys.push("")
    }
    state.evSelectedRowKeys = keys
    for (let i = 0; i < state.env.select.variable.length; i++) {
        if (keys.indexOf(state.env.select.variable[i].key) != -1) {
            state.env.select.variable[i].status = true
        } else {
            state.env.select.variable[i].status = false
        }
    }
}
function onSelectGlobalVariableChange(keys) {
    if (keys.indexOf("") == -1) {
        state.gvSelectedRowKeys.push("")
    }
    state.gvSelectedRowKeys = keys
    for (let i = 0; i < state.global.variable.length; i++) {
        if (keys.indexOf(state.global.variable[i].key) != -1) {
            state.global.variable[i].status = true
        } else {
            state.global.variable[i].status = false
        }
    }
}

function changeGVariable(key, record) {
    if (record.isInner && key != "delete") {
        record.isInner = false
        record.status = true
        record.isEncode = true
        state.global.variable.push({
            status: false,
            key: getUUID(),
            name: "",
            value: "",
            desc: "",
            isInner: true,
        })
        if (state.gvSelectedRowKeys.indexOf(record.key) == -1) {
            state.gvSelectedRowKeys.push(record.key)
        }
    }
    if (key == "delete") {
        state.global.variable = state.global.variable.filter((item) => item.key != record.key)
    }
}
function changeVariable(key, record) {
    if (record.isInner && key != "delete") {
        record.isInner = false
        record.status = true
        record.isEncode = true
        state.env.select.variable.push({
            status: false,
            key: getUUID(),
            name: "",
            value: "",
            desc: "",
            isInner: true,
        })
        if (state.evSelectedRowKeys.indexOf(record.key) == -1) {
            state.evSelectedRowKeys.push(record.key)
        }
    }
    if (key == "delete") {
        state.env.select.variable = state.env.select.variable.filter((item) => item.key != record.key)
    }
}
function backupGVariable() {
    store.get("item_" + state.itemInfo.id).then((res) => {
        state.global.variable = [...res.global.variable]
        state.gvSelectedRowKeys = []
        state.global.variable.forEach((item) => {
            if (item.status) {
                state.gvSelectedRowKeys.push(item.key)
            }
        })
        message.success("还原成功")
    })
}
function saveGVariable() {
    //校验是否由空name或者重复的name
    let tempset = {}
    for (let i = 0; i < state.global.variable.length; i++) {
        if (state.global.variable[i].name == "" && state.global.variable[i].status) {
            message.error("变量名不能为空")
            return
        }
        if (tempset[state.global.variable[i].name] && state.global.variable[i].status) {
            message.error(state.global.variable[i].name + ":变量名重复")
            return
        }
        tempset[state.global.variable[i].name] = true
    }

    state.itemInfo.global.variable = [...state.global.variable]
    store.set("item_" + state.itemInfo.id, { ...state.itemInfo }).then(() => {
        globalVars.changeItemId = state.itemInfo.id + "_i_" + new Date().getTime()
    })
    message.success("保存成功")
}
function onSelectChange(pSelectedRowKeys) {
    if (pSelectedRowKeys.indexOf("") == -1) {
        state.params.pSelectedRowKeys.push("")
    }
    state.params.pSelectedRowKeys = pSelectedRowKeys
    for (let i = 0; i < state.global.params.length; i++) {
        if (pSelectedRowKeys.indexOf(state.global.params[i].key) != -1) {
            state.global.params[i].status = true
        } else {
            state.global.params[i].status = false
        }
    }
}
function changeGparams(key, record) {
    if (record.isInner && key != "delete") {
        record.isInner = false
        record.status = true
        record.isEncode = true
        state.global.params.push({
            status: false,
            key: getUUID(),
            name: "",
            value: "",
            desc: "",
            isMust: false,
            isInner: true,
            isEncode: false,
        })
        if (state.params.pSelectedRowKeys.indexOf(record.key) == -1) {
            state.params.pSelectedRowKeys.push(record.key)
        }
    }
    if (key == "delete") {
        state.global.params = state.global.params.filter((item) => item.key != record.key)
    }
}
function onSelectHeadersChange(keys) {
    if (keys.indexOf("") == -1) {
        state.params.hSelectedRowKeys.push("")
    }
    state.params.hSelectedRowKeys = keys
    for (let i = 0; i < state.global.headers.length; i++) {
        if (keys.indexOf(state.global.headers[i].key) != -1) {
            state.global.headers[i].status = true
        } else {
            state.global.headers[i].status = false
        }
    }
}
function changeGHeaders(key, record) {
    if (record.isInner && key != "delete") {
        record.isInner = false
        record.status = true
        record.isEncode = true
        state.global.headers.push({
            status: false,
            key: getUUID(),
            name: "",
            value: "",
            desc: "",
            isMust: false,
            isInner: true,
            isEncode: false,
        })
        if (state.params.hSelectedRowKeys.indexOf(record.key) == -1) {
            state.params.hSelectedRowKeys.push(record.key)
        }
    }
    if (key == "delete") {
        state.global.headers = state.global.headers.filter((item) => item.key != record.key)
    }
}
function onSelectBodyChange(keys) {
    if (keys.indexOf("") == -1) {
        state.params.bSelectedRowKeys.push("")
    }
    state.params.bSelectedRowKeys = keys
    for (let i = 0; i < state.global.body.length; i++) {
        if (keys.indexOf(state.global.body[i].key) != -1) {
            state.global.body[i].status = true
        } else {
            state.global.body[i].status = false
        }
    }
}
function changeGBody(key, record) {
    if (record.isInner && key != "delete") {
        record.isInner = false
        record.status = true

        record.isEncode = false

        state.global.body.push({
            status: false,
            key: getUUID(),
            name: "",
            value: "",
            desc: "",
            isMust: false,
            isInner: true,
            isEncode: false,
        })
        if (state.params.bSelectedRowKeys.indexOf(record.key) == -1) {
            state.params.bSelectedRowKeys.push(record.key)
        }
    }
    if (key == "delete") {
        state.global.body = state.global.body.filter((item) => item.key != record.key)
    }
}
function backupGParams() {
    store.get("item_" + state.itemInfo.id).then((res) => {
        state.global.params = [...res.global.params]
        state.params.pSelectedRowKeys = []
        state.global.params.forEach((item) => {
            if (item.status) {
                state.params.pSelectedRowKeys.push(item.key)
            }
        })
        message.success("还原成功")
    })
}
function saveGParams() {
    //校验是否由空name或者重复的name
    let tempset = {}
    for (let i = 0; i < state.global.params.length; i++) {
        if (state.global.params[i].name == "" && state.global.params[i].status) {
            message.error("参数名不能为空")
            return
        }
        if (tempset[state.global.params[i].name] && state.global.params[i].status) {
            message.error(state.global.params[i].name + ":参数名重复")
            return
        }
        tempset[state.global.params[i].name] = true
    }

    state.itemInfo.global.params = [...state.global.params]
    store.set("item_" + state.itemInfo.id, { ...state.itemInfo }).then(() => {
        globalVars.changeItemId = state.itemInfo.id + "_i_" + new Date().getTime()
    })
    message.success("保存成功")
}
function backupGHeaders() {
    store.get("item_" + state.itemInfo.id).then((res) => {
        state.global.headers = [...res.global.headers]
        state.params.hSelectedRowKeys = []
        state.global.headers.forEach((item) => {
            if (item.status) {
                state.params.hSelectedRowKeys.push(item.key)
            }
        })
        message.success("还原成功")
    })
}
function saveGHeaders() {
    //校验是否由空name或者重复的name
    let tempset = {}
    for (let i = 0; i < state.global.headers.length; i++) {
        if (state.global.headers[i].name == "" && state.global.headers[i].status) {
            message.error("参数名不能为空")
            return
        }
        if (tempset[state.global.headers[i].name] && state.global.headers[i].status) {
            message.error(state.global.headers[i].name + ":参数名重复")
            return
        }
        tempset[state.global.headers[i].name] = true
    }
    state.itemInfo.global.headers = [...state.global.headers]
    store.set("item_" + state.itemInfo.id, { ...state.itemInfo }).then(() => {
        globalVars.changeItemId = state.itemInfo.id + "_i_" + new Date().getTime()
    })
    message.success("保存成功")
}
function backupGBody() {
    store.get("item_" + state.itemInfo.id).then((res) => {
        state.global.body = [...res.global.body]
        state.params.bSelectedRowKeys = []
        state.global.body.forEach((item) => {
            if (item.status) {
                state.params.bSelectedRowKeys.push(item.key)
            }
        })
        message.success("还原成功")
    })
}
function saveGBody() {
    //校验是否由空name或者重复的name
    let tempset = {}
    for (let i = 0; i < state.global.body.length; i++) {
        if (state.global.body[i].name == "" && state.global.body[i].status) {
            message.error("参数名不能为空")
            return
        }
        if (tempset[state.global.body[i].name] && state.global.body[i].status) {
            message.error(state.global.body[i].name + ":参数名重复")
            return
        }
        tempset[state.global.body[i].name] = true
    }
    state.itemInfo.global.body = [...state.global.body]
    store.set("item_" + state.itemInfo.id, { ...state.itemInfo }).then(() => {
        globalVars.changeItemId = state.itemInfo.id + "_i_" + new Date().getTime()
    })
    message.success("保存成功")
}
function addTag() {
    state.tag = {
        open: true,
        name: "",
        desc: "",
        key: getUUID(),
        color: "",
    }
}
function saveTag() {
    if (state.tag.name == "") {
        message.error("名称不能为空")
        return
    }
    let index = -1
    for (let i = 0; i < state.itemInfo.tag.length; i++) {
        if (state.itemInfo.tag[i].name == state.tag.name && state.tag.key != state.itemInfo.tag[i].key) {
            message.error(state.itemInfo.tag[i].name + "名称已存在")
            return
        }
        if (state.itemInfo.tag[i].key == state.tag.key) {
            index = i
        }
    }
    if (index == -1) {
        state.itemInfo.tag.push({
            name: state.tag.name,
            color: state.tag.color,
            desc: state.tag.desc,
            key: state.tag.key,
        })
    } else {
        state.itemInfo.tag[index] = {
            name: state.tag.name,
            color: state.tag.color,
            desc: state.tag.desc,
            key: state.tag.key,
        }
    }
    store.set("item_" + state.itemInfo.id, { ...state.itemInfo }).then(() => {
        globalVars.changeItemId = state.itemInfo.id + "_i_" + new Date().getTime()
    })
    message.success("保存成功")
    state.tag.open = false
}
function editTag(item) {
    state.tag = { ...item, open: true }
}
async function delTag(item) {
    for (let i = 0; i < state.itemInfo.apiList.length; i++) {
        if (state.itemInfo.apiList[i].tag.indexOf(item.key) != -1) {
            message.error("当前标签已使用，请先修改对接口标签")
            return
        }
    }
    for (let i = 0; i < state.itemInfo.tag.length; i++) {
        if (state.itemInfo.tag[i].key == item.key) {
            state.itemInfo.tag.splice(i, 1)
        }
    }
    store.set("item_" + state.itemInfo.id, { ...state.itemInfo }).then(() => {
        globalVars.changeItemId = state.itemInfo.id + "_i_" + new Date().getTime()
    })
    message.success("删除成功")
}
function searchApi() {
    state.apiSearch = state.apiSearch.trim()
    let hiddenAll = false
    let hiddenNum = 0
    for (let i = 0; i < state.itemInfo.apiList.length; i++) {
        let api = state.itemInfo.apiList[i]
        let hidden = true
        if (api.name.indexOf(state.apiSearch) != -1) {
            hidden = false
        } else if (api.path.indexOf(state.apiSearch) != -1) {
            hidden = false
        } else if (api.desc.indexOf(state.apiSearch) != -1) {
            hidden = false
        }
        if (!hidden && state.tagSelect.length > 0) {
            hidden = true
            for (let j = 0; j < state.tagSelect.length; j++) {
                if (api.tag.indexOf(state.tagSelect[j]) != -1) {
                    hidden = false
                    break
                }
            }
        }
        if (hidden) {
            hiddenNum++
        }
        api.hidden = hidden
    }
    if (hiddenNum > 0 && hiddenNum == state.itemInfo.apiList.length) {
        hiddenAll = true
    }
    state.hiddenAll = hiddenAll
}
function reset() {
    state.apiSearch = ""
    state.tagSelect = []
    state.hiddenAll = false
    searchApi()
}
function getItemTags(tagkeys) {
    if (!tagkeys || tagkeys.length == 0) {
        return []
    }
    let tags = []

    for (let i = 0; i < tagkeys.length; i++) {
        for (let j = 0; j < state.itemInfo.tag.length; j++) {
            if (tagkeys[i] == state.itemInfo.tag[j].key) {
                tags.push(state.itemInfo.tag[j])
            }
        }
    }
    return tags
}
watch(
    () => globalVars.changeItemId,
    (a) => {
        if (a.indexOf("_i_") !== -1) {
            return
        }
        let tid = a.split("_")[0]
        if (tid == state.itemInfo.id) {
            store.get(`item_${state.itemInfo.id}`).then((da) => {
                state.itemInfo = da
            })
        }
    },
)
</script>
<template>
    <div class="f_row" style="position: relative; height: 100%">
        <div class="left_kuang f_col" ref="leftKuang">
            <h2 class="f_row title">
                <div style="margin-left: 20px"></div>
                <img src="/favicon-32x32.png" alt="T2" class="icon" />
                项目列表
            </h2>
            <div class="f_col list_content">
                <div
                    class="item"
                    v-for="item in state.list"
                    :key="item.id"
                    :class="{ itemActive: state.itemInfo.id == item.id }"
                    @click="getItemInfo(item.id)"
                >
                    {{ item.name }}
                </div>
                <div style="width: 100%">
                    <a-button type="link" @click="addItem()" class="f_row add">
                        <plus theme="outline" class="f" size="16" />
                        新增项目
                    </a-button>
                </div>
            </div>
        </div>
        <div class="middle_kuang" ref="middleKuang"></div>
        <div class="right_kuang f" ref="rightKuang">
            <div v-if="!state.itemInfo.id" style="font-size: 18px">请选择项目</div>
            <div v-else class="f_col right_content">
                <h2 class="f_col title">
                    <a-segmented v-model:value="state.itemOption" :options="state.itemOptions" class="itemOptions" />
                </h2>
                <div class="right_info">
                    <a-modal v-model:open="state.api.open" title="新增接口" @ok="saveNewApiOk">
                        <a-form :model="state.api" :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 560px">
                            <a-form-item label="接口名称">
                                <a-input v-model:value="state.api.name" />
                            </a-form-item>
                            <a-form-item label="请求方法">
                                <a-select v-model:value="state.api.method" style="width: 100%">
                                    <a-select-option value="GET">GET</a-select-option>
                                    <a-select-option value="POST">POST</a-select-option>
                                    <a-select-option value="PUT">PUT</a-select-option>
                                    <a-select-option value="DELETE">DELETE</a-select-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item label="接口路径">
                                <a-input v-model:value="state.api.path" placeholder="请求路径，/或者http(s)://开头" />
                            </a-form-item>
                            <a-form-item label="接口标签">
                                <a-select
                                    v-model:value="state.api.tag"
                                    mode="tags"
                                    style="width: 100%"
                                    placeholder="请输入标签,在项目-标签配置中维护"
                                >
                                    <a-select-option v-for="t in state.itemInfo.tag" :key="t.key" :value="t.key">
                                        <a-tag :color="t.color">{{ t.name }}</a-tag>
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item label="接口描述">
                                <a-textarea v-model:value="state.api.desc" :auto-size="{ minRows: 3, maxRows: 6 }" />
                            </a-form-item>
                        </a-form>
                    </a-modal>
                    <div v-if="state.itemOption == '基本信息'" class="f wh100">
                        <a-form
                            :model="state.itemInfo"
                            :label-col="labelCol"
                            :wrapper-col="wrapperCol"
                            style="width: 560px"
                        >
                            <a-form-item label="项目ID">
                                <a-input v-model:value="state.itemInfo.id" disabled />
                            </a-form-item>
                            <a-form-item label="项目名称">
                                <a-input v-model:value="state.itemInfo.name" />
                            </a-form-item>
                            <a-form-item label="项目描述">
                                <a-textarea
                                    v-model:value="state.itemInfo.desc"
                                    :auto-size="{ minRows: 3, maxRows: 6 }"
                                />
                            </a-form-item>
                            <a-form-item :wrapper-col="{ span: 14, offset: 8 }">
                                <a-button type="primary" @click="saveItemInfo()" v-if="!state.isInNew">保存</a-button>
                                <a-button type="primary" @click="saveItemInfo()" v-if="state.isInNew">新建</a-button>
                                <a-button style="margin-left: 24px" @click="backItemInfo()">还原</a-button>
                            </a-form-item>
                        </a-form>
                    </div>
                    <div v-else-if="state.itemOption == '接口列表'" class="f wh100">
                        <div v-if="state.isInNew">接口列表</div>
                        <div v-else class="f_col wh100" style="justify-content: flex-start">
                            <a-flex wrap="wrap" gap="small" justify="start" class="w100" style="margin-bottom: 12px">
                                <a-input
                                    v-model:value="state.apiSearch"
                                    placeholder="筛选接口名称、路径"
                                    style="width: 380px; flex: 1"
                                    @pressEnter="searchApi"
                                    :allowClear="true"
                                />
                                <a-select
                                    v-model:value="state.tagSelect"
                                    mode="multiple"
                                    style="width: 240px"
                                    placeholder="标签筛选"
                                    :max-tag-count="2"
                                    :maxTagTextLength="6"
                                >
                                    <a-select-option v-for="t in state.itemInfo.tag" :key="t.key" :value="t.key">
                                        <a-tag :color="t.color">{{ t.name }}</a-tag>
                                    </a-select-option>
                                </a-select>
                                <div class="f_row" style="gap: 8px">
                                    <a-button type="primary" @click="searchApi">筛选</a-button>
                                    <a-button type="text" @click="reset">重置</a-button>
                                    <a-button type="link" @click="newApi()">新建</a-button>
                                </div>
                            </a-flex>

                            <a-collapse
                                :bordered="false"
                                v-if="state.itemInfo?.apiList?.length > 0"
                                collapsible="icon"
                                :activeKey="state.openApiKeys"
                                @change="handleApiOpenChange"
                            >
                                <template v-for="(item, index) in state.itemInfo.apiList" :key="item.id">
                                    <a-collapse-panel
                                        :collapsible="item.status ? 'icon' : 'disabled'"
                                        :showArrow="item.children?.length > 0"
                                        v-if="!item.hidden"
                                    >
                                        <template #header>
                                            <div class="f_row">
                                                <div
                                                    style="width: 150px; justify-content: flex-start"
                                                    class="text-overflow f_row"
                                                >
                                                    <div style="margin-right: 4px" v-if="!item.rename">
                                                        {{ item.name }}
                                                    </div>
                                                    <a-tooltip
                                                        color="var(--Primary-2)"
                                                        v-if="!item.rename"
                                                        title="重命名"
                                                    >
                                                        <edit
                                                            class="mouse-pointer f"
                                                            @click="
                                                                () => {
                                                                    item.rename = true
                                                                    item.backupName = item.name
                                                                }
                                                            "
                                                        />
                                                    </a-tooltip>
                                                    <a-input
                                                        v-model:value="item.backupName"
                                                        v-if="item.rename"
                                                        style="margin-right: 4px; padding: 2px 4px"
                                                    />
                                                    <div v-if="item.rename" class="f_col" style="gap: 4px">
                                                        <a-tooltip color="var(--Primary-2)" title="保存">
                                                            <check
                                                                theme="outline"
                                                                fill="lightgreen"
                                                                class="mouse-pointer f"
                                                                @click="renameApi(item)"
                                                            />
                                                        </a-tooltip>
                                                        <a-tooltip color="var(--Primary-2)" title="取消">
                                                            <close
                                                                theme="outline"
                                                                fill="red"
                                                                class="mouse-pointer f"
                                                                @click="
                                                                    () => {
                                                                        item.rename = false
                                                                    }
                                                                "
                                                            />
                                                        </a-tooltip>
                                                    </div>
                                                </div>
                                                <div style="margin: 0 12px; width: 56px">
                                                    {{ item.method }}
                                                </div>
                                                <div style="padding: 0 8px; flex: 1">{{ item.path }}</div>
                                                <a-tag
                                                    style="padding: 0 8px"
                                                    :color="tag.color"
                                                    v-for="tag in getItemTags(item.tag)"
                                                    :key="tag.key"
                                                >
                                                    {{ tag.name }}
                                                </a-tag>
                                                <div style="flex: 1"></div>
                                            </div>
                                        </template>
                                        <template #extra>
                                            <div class="f_row">
                                                <a-switch
                                                    v-model:checked="item.status"
                                                    @change="apiOpenSwitch(index)"
                                                    size="small"
                                                />
                                                <a-button
                                                    type="link"
                                                    size="small"
                                                    style="margin-left: 8px"
                                                    @click.stop="openApiPage(item)"
                                                >
                                                    请求</a-button
                                                >

                                                <a-popconfirm
                                                    title="确定要删除吗？"
                                                    ok-text="删除"
                                                    cancel-text="取消"
                                                    @confirm="delApi(item.id)"
                                                >
                                                    <a-button size="small" type="link" danger>删除</a-button>
                                                </a-popconfirm>
                                            </div>
                                        </template>
                                        <p v-for="zi in item.children" :key="zi.id">1</p>
                                    </a-collapse-panel>
                                </template>
                            </a-collapse>
                            <div
                                style="margin-top: 10%"
                                v-if="!state.itemInfo.apiList || state.itemInfo.apiList.length == 0"
                            >
                                暂无数据
                            </div>
                            <div style="margin-top: 10%" v-if="state.hiddenAll">没有匹配的数据</div>
                        </div>
                    </div>
                    <div class="f wh100" v-else-if="state.itemOption == '前置配置'">
                        <div v-if="state.isInNew">暂无数据</div>
                        <codeM
                            v-else
                            :value="state.itemInfo.before[0].text"
                            :idd="'item_before_' + state.itemInfo.id"
                            @update:value="saveBefore"
                        ></codeM>
                    </div>
                    <div class="f wh100" v-else-if="state.itemOption == '后置配置'">
                        <div v-if="state.isInNew">暂无数据</div>
                        <codeM
                            v-else
                            :value="state.itemInfo.after[0].text"
                            @update:value="saveAfter"
                            :idd="'item_after_' + state.itemInfo.id"
                        ></codeM>
                    </div>
                    <div v-else-if="state.itemOption == '标签配置'" class="f wh100">
                        <div v-if="state.isInNew">暂无数据</div>
                        <div class="wh100" v-else>
                            <div class="f_row" style="gap: 8px; margin-bottom: 8px; justify-content: flex-start">
                                <a-button type="primary" size="small" @click="addTag">添加标签</a-button>
                                <!-- <a-button type="text" size="small" @click="refreshTags">刷新</a-button> -->
                            </div>
                            <a-modal v-model:open="state.tag.open" title="新增标签" @ok="saveTag">
                                <a-form :model="state.tag" :label-col="labelCol" :wrapper-col="wrapperCol">
                                    <a-form-item label="标签名称">
                                        <a-input v-model:value="state.tag.name" />
                                    </a-form-item>
                                    <a-form-item label="标签颜色">
                                        <a-select v-model:value="state.tag.color">
                                            <a-select-option value=""> <a-tag>默认</a-tag></a-select-option>
                                            <!-- 优先适合暗夜模式的颜色值 -->
                                            <a-select-option value="black"
                                                ><a-tag color="black">黑色</a-tag></a-select-option
                                            >
                                            <a-select-option value="gray"
                                                ><a-tag color="gray">灰色</a-tag></a-select-option
                                            >
                                            <a-select-option value="pink"
                                                ><a-tag color="pink">粉红色 </a-tag>
                                            </a-select-option>
                                            <a-select-option value="red"
                                                ><a-tag color="red">红色</a-tag></a-select-option
                                            >
                                            <a-select-option value="volcano"
                                                ><a-tag color="volcano">火山色</a-tag></a-select-option
                                            >
                                            <a-select-option value="orange"
                                                ><a-tag color="orange">橙色</a-tag></a-select-option
                                            >
                                            <a-select-option value="gold"
                                                ><a-tag color="gold">金色</a-tag></a-select-option
                                            >
                                            <a-select-option value="lime"
                                                ><a-tag color="lime">青柠色</a-tag></a-select-option
                                            >
                                            <a-select-option value="green"
                                                ><a-tag color="green">绿色</a-tag></a-select-option
                                            >
                                            <a-select-option value="cyan"
                                                ><a-tag color="cyan">青色</a-tag></a-select-option
                                            >
                                            <a-select-option value="blue"
                                                ><a-tag color="blue">蓝色</a-tag></a-select-option
                                            >
                                            <a-select-option value="geekblue"
                                                ><a-tag color="geekblue">极客蓝</a-tag></a-select-option
                                            >
                                            <a-select-option value="purple"
                                                ><a-tag color="purple">紫色</a-tag></a-select-option
                                            >
                                            <a-select-option value="magenta"
                                                ><a-tag color="magenta">品红色</a-tag></a-select-option
                                            >
                                        </a-select>
                                    </a-form-item>
                                    <a-form-item label="标签描述">
                                        <a-textarea
                                            v-model:value="state.tag.desc"
                                            :auto-size="{ minRows: 3, maxRows: 6 }"
                                        />
                                    </a-form-item>
                                </a-form>
                            </a-modal>
                            <a-table
                                bordered
                                :scroll="{ y: state.ppp2 + 130, x: false }"
                                :data-source="state.itemInfo.tag"
                                :pagination="false"
                                class="wh100"
                                size="small"
                                :columns="tagsColumns"
                            >
                                <template #bodyCell="{ column, text, record }">
                                    <template v-if="column.dataIndex == 'color'">
                                        {{ text == "" ? "默认" : text }}
                                    </template>
                                    <template v-else-if="column.dataIndex == 'show'">
                                        <a-tag :color="record.color">{{ record.name }}</a-tag>
                                    </template>
                                    <template v-else-if="column.dataIndex == 'opt'">
                                        <div class="f_row">
                                            <a-button type="link" @click="editTag(record)" size="small">编辑</a-button>
                                            <a-popconfirm
                                                title="确定要删除吗？"
                                                ok-text="删除"
                                                cancel-text="取消"
                                                @confirm="delTag(record)"
                                            >
                                                <a-button type="link" size="small">删除</a-button>
                                            </a-popconfirm>
                                        </div>
                                    </template>
                                </template>
                            </a-table>
                        </div>
                    </div>
                    <div v-else-if="state.itemOption == '删除项目'" class="f wh100">
                        <div v-if="state.isInNew">暂无数据</div>

                        <a-popconfirm
                            v-else
                            title="确定要删除吗？"
                            ok-text="删除"
                            cancel-text="取消"
                            @confirm="delItem()"
                        >
                            <a-button type="primary" danger>删除项目</a-button>
                        </a-popconfirm>
                    </div>
                    <div v-else-if="state.itemOption == '环境变量'" class="f wh100">
                        <div v-if="state.isInNew">暂无数据</div>
                        <div class="wh100 f_row" style="background-color: var(--Neutral-10)">
                            <div class="left_kuang" style="border-right: 1px solid var(--Neutral-8); height: 100%">
                                <div class="f_col list_content">
                                    <div
                                        class="env"
                                        v-for="item in state.itemInfo.env.all"
                                        :key="item.name"
                                        :class="{ envActive: state.env.select.id == item.id }"
                                        @click="getEnvInfo(item)"
                                    >
                                        <check-correct
                                            theme="outline"
                                            v-if="item.status"
                                            size="16"
                                            fill="var(--Primary-8)"
                                        />
                                        {{ item.value }}
                                    </div>
                                    <div style="width: 100%">
                                        <a-button
                                            type="link"
                                            @click="addEnv()"
                                            class="f_row add"
                                            :class="{ envActive: state.env.select.isNew }"
                                        >
                                            <plus theme="outline" class="f" size="16" />
                                            新增环境
                                        </a-button>
                                    </div>
                                </div>
                            </div>
                            <div class="right_kuang f_col" style="flex: 1; padding: 12px; justify-content: flex-start">
                                <div
                                    class="f_row w100"
                                    style="justify-content: flex-start; margin-bottom: 12px; gap: 12px"
                                >
                                    <a-input
                                        v-model:value="state.env.select.value"
                                        addon-before="环境名称"
                                        style="width: 300px"
                                        placeholder="请输入"
                                    />
                                    <a-checkbox v-model:checked="state.env.select.status" @change="changeEnvDefault()"
                                        >设为默认(切换)</a-checkbox
                                    >
                                    <div style="flex: 1"></div>
                                    <a-button @click="backupEnv()" v-if="!state.env.select.isNew">还原</a-button>
                                    <a-button type="primary" @click="saveEnv()">保存</a-button>
                                    <a-button danger type="text" @click="delEnv()" v-if="!state.env.select.isNew"
                                        >删除</a-button
                                    >
                                </div>
                                <h3 style="width: 100%; text-align: left; margin: 8px 0px">域名地址配置</h3>

                                <a-input
                                    v-model:value="state.env.select.path"
                                    addon-before="域名地址"
                                    placeholder="http(s)://xxxx"
                                />
                                <h3 style="width: 100%; text-align: left; margin: 8px 0px">环境变量</h3>
                                <a-table
                                    bordered
                                    :scroll="{ y: state.ppp2 }"
                                    :data-source="state.env.select.variable"
                                    :pagination="false"
                                    class="wh100"
                                    size="small"
                                    :columns="variableColumns"
                                    :row-selection="{
                                        selectedRowKeys: state.evSelectedRowKeys,
                                        onChange: onSelectEnvVariableChange,
                                        getCheckboxProps: (record) => {
                                            return {
                                                disabled: record.isInner,
                                            }
                                        },
                                    }"
                                >
                                    <template #bodyCell="{ column, text, record }">
                                        <template v-if="column.dataIndex == 'name'">
                                            <a-input
                                                v-model:value="record.name"
                                                @change="changeVariable('name', record)"
                                                placeholder="添加变量"
                                                :status="record.name.trim() == '' && !record.isInner ? 'error' : ''"
                                            >
                                            </a-input>
                                        </template>
                                        <template v-else-if="column.dataIndex == 'value'">
                                            <a-input
                                                v-model:value="record.value"
                                                @change="changeVariable('value', record)"
                                                placeholder="添加变量值"
                                                :disabled="record.isInner"
                                            >
                                                <template #suffix v-if="!record.isInner">
                                                    <div class="f_row" style="gap: 8px">
                                                        <a-tooltip placement="bottom" color="var(--Primary-2)">
                                                            <template #title>放大展示</template>
                                                            <stretching
                                                                theme="outline"
                                                                size="14"
                                                                class="mouse-pointer"
                                                                fill="var(--character-60)"
                                                            />
                                                        </a-tooltip>
                                                    </div>
                                                </template>
                                            </a-input>
                                        </template>
                                        <template v-else-if="column.dataIndex == 'desc'">
                                            <a-input
                                                v-model:value="record.desc"
                                                @change="changeVariable('desc', record)"
                                                placeholder="说明"
                                                :disabled="record.isInner"
                                            >
                                                <template #suffix v-if="!record.isInner">
                                                    <div class="f_row" style="gap: 8px">
                                                        <a-tooltip placement="bottom" color="var(--Primary-2)">
                                                            <template #title>放大展示</template>
                                                            <stretching
                                                                theme="outline"
                                                                size="14"
                                                                class="mouse-pointer"
                                                                fill="var(--character-60)"
                                                            />
                                                        </a-tooltip>
                                                    </div>
                                                </template>
                                            </a-input>
                                        </template>
                                        <template v-else-if="column.dataIndex == 'opt'">
                                            <a-popconfirm
                                                title="确认删除吗？"
                                                ok-text="是"
                                                cancel-text="否"
                                                v-if="!record.isInner"
                                                @confirm="changeVariable('delete', record)"
                                            >
                                                <a-button type="link" size="small">删除</a-button>
                                            </a-popconfirm>
                                        </template>
                                    </template>
                                </a-table>
                            </div>
                        </div>
                    </div>
                    <div v-else-if="state.itemOption == '全局变量'" class="f wh100">
                        <a-table
                            bordered
                            :scroll="{ y: state.ppp2 + 130 }"
                            :data-source="state.global.variable"
                            :pagination="false"
                            class="wh100"
                            size="small"
                            :columns="variableColumns"
                            :row-selection="{
                                selectedRowKeys: state.gvSelectedRowKeys,
                                onChange: onSelectGlobalVariableChange,
                                getCheckboxProps: (record) => {
                                    return {
                                        disabled: record.isInner,
                                    }
                                },
                            }"
                        >
                            <template #summary>
                                <a-table-summary fixed>
                                    <a-table-summary-row>
                                        <a-table-summary-cell></a-table-summary-cell>
                                        <a-table-summary-cell></a-table-summary-cell>
                                        <a-table-summary-cell></a-table-summary-cell>

                                        <a-table-summary-cell>
                                            <a-button
                                                type="text"
                                                style="float: right; margin-left: 8px"
                                                size="small"
                                                @click="backupGVariable()"
                                                >还原</a-button
                                            >
                                            <a-button
                                                type="primary"
                                                style="float: right"
                                                size="small"
                                                @click="saveGVariable()"
                                                >保存</a-button
                                            >
                                        </a-table-summary-cell>
                                        <a-table-summary-cell></a-table-summary-cell>
                                    </a-table-summary-row>
                                </a-table-summary>
                            </template>
                            <template #bodyCell="{ column, text, record }">
                                <template v-if="column.dataIndex == 'name'">
                                    <a-input
                                        v-model:value="record.name"
                                        @change="changeGVariable('name', record)"
                                        placeholder="添加变量"
                                        :status="record.name.trim() == '' && !record.isInner ? 'error' : ''"
                                    >
                                    </a-input>
                                </template>
                                <template v-else-if="column.dataIndex == 'value'">
                                    <a-input
                                        v-model:value="record.value"
                                        @change="changeGVariable('value', record)"
                                        placeholder="添加变量值"
                                        :disabled="record.isInner"
                                    >
                                        <template #suffix v-if="!record.isInner">
                                            <div class="f_row" style="gap: 8px">
                                                <a-tooltip placement="bottom" color="var(--Primary-2)">
                                                    <template #title>放大展示</template>
                                                    <stretching
                                                        theme="outline"
                                                        size="14"
                                                        class="mouse-pointer"
                                                        fill="var(--character-60)"
                                                    />
                                                </a-tooltip>
                                            </div>
                                        </template>
                                    </a-input>
                                </template>
                                <template v-else-if="column.dataIndex == 'desc'">
                                    <a-input
                                        v-model:value="record.desc"
                                        @change="changeGVariable('desc', record)"
                                        placeholder="说明"
                                        :disabled="record.isInner"
                                    >
                                        <template #suffix v-if="!record.isInner">
                                            <div class="f_row" style="gap: 8px">
                                                <a-tooltip placement="bottom" color="var(--Primary-2)">
                                                    <template #title>放大展示</template>
                                                    <stretching
                                                        theme="outline"
                                                        size="14"
                                                        class="mouse-pointer"
                                                        fill="var(--character-60)"
                                                    />
                                                </a-tooltip>
                                            </div>
                                        </template>
                                    </a-input>
                                </template>
                                <template v-else-if="column.dataIndex == 'opt'">
                                    <a-popconfirm
                                        title="确认删除吗？"
                                        ok-text="是"
                                        cancel-text="否"
                                        v-if="!record.isInner"
                                        @confirm="changeGVariable('delete', record)"
                                    >
                                        <a-button type="link" size="small">删除</a-button>
                                    </a-popconfirm>
                                </template>
                            </template>
                        </a-table>
                    </div>
                    <div
                        v-else-if="state.itemOption == '全局参数'"
                        class="f_col wh100"
                        style="justify-content: flex-start"
                    >
                        <div class="ppp">
                            <a-segmented v-model:value="state.params.select" :options="state.params.options" block />
                        </div>
                        <div class="f_col ppp2" style="height: calc(100% - 40px); width: 100%">
                            <template v-if="state.params.select == 'params'">
                                <a-table
                                    bordered
                                    :scroll="{ y: state.ppp2 + 100, x: false }"
                                    :data-source="state.global.params"
                                    :pagination="false"
                                    class="wh100"
                                    size="small"
                                    :columns="paramsColumns"
                                    :row-selection="{
                                        selectedRowKeys: state.params.pSelectedRowKeys,
                                        onChange: onSelectChange,
                                        getCheckboxProps: (record) => {
                                            return {
                                                disabled: record.isInner,
                                            }
                                        },
                                    }"
                                >
                                    <template #summary>
                                        <a-table-summary fixed>
                                            <a-table-summary-row>
                                                <a-table-summary-cell></a-table-summary-cell>
                                                <a-table-summary-cell></a-table-summary-cell>
                                                <a-table-summary-cell></a-table-summary-cell>
                                                <a-table-summary-cell></a-table-summary-cell>
                                                <a-table-summary-cell></a-table-summary-cell>

                                                <a-table-summary-cell>
                                                    <a-button
                                                        type="text"
                                                        style="float: right; margin-left: 8px"
                                                        size="small"
                                                        @click="backupGParams()"
                                                        >还原</a-button
                                                    >
                                                    <a-button
                                                        type="primary"
                                                        style="float: right"
                                                        size="small"
                                                        @click="saveGParams()"
                                                        >保存</a-button
                                                    >
                                                </a-table-summary-cell>
                                                <a-table-summary-cell></a-table-summary-cell>
                                            </a-table-summary-row>
                                        </a-table-summary>
                                    </template>
                                    <template #bodyCell="{ column, text, record }">
                                        <template v-if="column.dataIndex == 'name'">
                                            <a-input
                                                v-model:value="record.name"
                                                @change="changeGparams('name', record)"
                                                placeholder="添加参数"
                                                :status="record.name.trim() == '' && !record.isInner ? 'error' : ''"
                                            >
                                            </a-input>
                                        </template>
                                        <template v-else-if="column.dataIndex == 'value'">
                                            <a-input
                                                v-model:value="record.value"
                                                @change="changeGparams('value', record)"
                                                placeholder="添加参数值"
                                                :disabled="record.isInner"
                                            >
                                                <template #suffix v-if="!record.isInner">
                                                    <div class="f_row" style="gap: 8px">
                                                        <a-tooltip placement="bottom" color="var(--Primary-2)">
                                                            <template #title>智能数据</template>
                                                            <magic
                                                                theme="outline"
                                                                size="14"
                                                                class="mouse-pointer"
                                                                fill="var(--character-60)"
                                                            />
                                                        </a-tooltip>

                                                        <a-tooltip placement="bottom" color="var(--Primary-2)">
                                                            <template #title>放大展示</template>
                                                            <stretching
                                                                theme="outline"
                                                                size="14"
                                                                class="mouse-pointer"
                                                                fill="var(--character-60)"
                                                            />
                                                        </a-tooltip>
                                                    </div>
                                                </template>
                                            </a-input>
                                        </template>
                                        <template v-else-if="column.dataIndex == 'desc'">
                                            <a-input
                                                v-model:value="record.desc"
                                                @change="changeGparams('desc', record)"
                                                placeholder="说明"
                                                :disabled="record.isInner"
                                            >
                                                <template #suffix v-if="!record.isInner">
                                                    <div class="f_row" style="gap: 8px">
                                                        <a-tooltip placement="bottom" color="var(--Primary-2)">
                                                            <template #title>放大展示</template>
                                                            <stretching
                                                                theme="outline"
                                                                size="14"
                                                                class="mouse-pointer"
                                                                fill="var(--character-60)"
                                                            />
                                                        </a-tooltip>
                                                    </div> </template
                                            ></a-input>
                                        </template>
                                        <template v-else-if="column.dataIndex == 'opt'">
                                            <a-popconfirm
                                                title="确认删除吗？"
                                                ok-text="是"
                                                cancel-text="否"
                                                v-if="!record.isInner"
                                                @confirm="changeGparams('delete', record)"
                                            >
                                                <a-button type="link" size="small">删除</a-button>
                                            </a-popconfirm>
                                        </template>
                                        <template v-else-if="column.dataIndex == 'isMust'">
                                            <a-checkbox
                                                v-model:checked="record.isMust"
                                                :disabled="record.isInner"
                                                @change="changeGparams('isMust', record)"
                                            />
                                        </template>
                                        <template v-else-if="column.dataIndex == 'isEncode'">
                                            <a-checkbox
                                                v-model:checked="record.isEncode"
                                                :disabled="record.isInner"
                                                @change="changeGparams('isEncode', record)"
                                            />
                                        </template>
                                    </template>
                                </a-table>
                            </template>
                            <template v-if="state.params.select == 'headers'">
                                <a-table
                                    bordered
                                    :scroll="{ y: state.ppp2 + 100 }"
                                    :data-source="state.global.headers"
                                    :pagination="false"
                                    class="wh100"
                                    size="small"
                                    :columns="headersColumns"
                                    :row-selection="{
                                        selectedRowKeys: state.params.hSelectedRowKeys,
                                        onChange: onSelectHeadersChange,
                                        getCheckboxProps: (record) => {
                                            return {
                                                disabled: record.isInner,
                                            }
                                        },
                                    }"
                                    ><template #summary>
                                        <a-table-summary fixed>
                                            <a-table-summary-row>
                                                <a-table-summary-cell></a-table-summary-cell>
                                                <a-table-summary-cell></a-table-summary-cell>
                                                <a-table-summary-cell></a-table-summary-cell>

                                                <a-table-summary-cell>
                                                    <a-button
                                                        type="text"
                                                        style="float: right; margin-left: 8px"
                                                        size="small"
                                                        @click="backupGHeaders()"
                                                        >还原</a-button
                                                    >
                                                    <a-button
                                                        type="primary"
                                                        style="float: right"
                                                        size="small"
                                                        @click="saveGHeaders()"
                                                        >保存</a-button
                                                    >
                                                </a-table-summary-cell>
                                                <a-table-summary-cell></a-table-summary-cell>
                                            </a-table-summary-row>
                                        </a-table-summary>
                                    </template>
                                    <template #bodyCell="{ column, text, record }">
                                        <template v-if="column.dataIndex == 'name'">
                                            <a-input
                                                v-model:value="record.name"
                                                @change="changeGHeaders('name', record)"
                                                placeholder="添加请求头参数"
                                                :status="record.name.trim() == '' && !record.isInner ? 'error' : ''"
                                            >
                                            </a-input>
                                        </template>
                                        <template v-else-if="column.dataIndex == 'value'">
                                            <a-input
                                                v-model:value="record.value"
                                                @change="changeGHeaders('value', record)"
                                                placeholder="添加请求头值"
                                                :disabled="record.isInner"
                                            >
                                                <template #suffix v-if="!record.isInner">
                                                    <div class="f_row" style="gap: 8px">
                                                        <a-tooltip placement="bottom" color="var(--Primary-2)">
                                                            <template #title>放大展示</template>
                                                            <stretching
                                                                theme="outline"
                                                                size="14"
                                                                class="mouse-pointer"
                                                                fill="var(--character-60)"
                                                            />
                                                        </a-tooltip>
                                                    </div>
                                                </template>
                                            </a-input>
                                        </template>
                                        <template v-else-if="column.dataIndex == 'desc'">
                                            <a-input
                                                v-model:value="record.desc"
                                                @change="changeGHeaders('desc', record)"
                                                placeholder="说明"
                                                :disabled="record.isInner"
                                            >
                                                <template #suffix v-if="!record.isInner">
                                                    <div class="f_row" style="gap: 8px">
                                                        <a-tooltip placement="bottom" color="var(--Primary-2)">
                                                            <template #title>放大展示</template>
                                                            <stretching
                                                                theme="outline"
                                                                size="14"
                                                                class="mouse-pointer"
                                                                fill="var(--character-60)"
                                                            />
                                                        </a-tooltip>
                                                    </div> </template
                                            ></a-input>
                                        </template>
                                        <template v-else-if="column.dataIndex == 'opt'">
                                            <a-popconfirm
                                                title="确认删除吗？"
                                                ok-text="是"
                                                cancel-text="否"
                                                v-if="!record.isInner"
                                                @confirm="changeGHeaders('delete', record)"
                                            >
                                                <a-button type="link" size="small">删除</a-button>
                                            </a-popconfirm>
                                        </template>
                                    </template>
                                </a-table>
                            </template>
                            <div v-if="state.params.select == 'body'" class="wh100">
                                <a-table
                                    bordered
                                    :scroll="{ y: state.ppp2 + 100 }"
                                    :data-source="state.global.body"
                                    :pagination="false"
                                    class="wh100"
                                    size="small"
                                    :columns="paramsColumns"
                                    :row-selection="{
                                        selectedRowKeys: state.params.bSelectedRowKeys,
                                        onChange: onSelectBodyChange,
                                        getCheckboxProps: (record) => {
                                            return {
                                                disabled: record.isInner,
                                            }
                                        },
                                    }"
                                >
                                    <template #summary>
                                        <a-table-summary fixed>
                                            <a-table-summary-row>
                                                <a-table-summary-cell></a-table-summary-cell>
                                                <a-table-summary-cell></a-table-summary-cell>
                                                <a-table-summary-cell></a-table-summary-cell>
                                                <a-table-summary-cell></a-table-summary-cell>
                                                <a-table-summary-cell></a-table-summary-cell>

                                                <a-table-summary-cell>
                                                    <a-button
                                                        type="text"
                                                        style="float: right; margin-left: 8px"
                                                        size="small"
                                                        @click="backupGBody()"
                                                        >还原</a-button
                                                    >
                                                    <a-button
                                                        type="primary"
                                                        style="float: right"
                                                        size="small"
                                                        @click="saveGBody()"
                                                        >保存</a-button
                                                    >
                                                </a-table-summary-cell>
                                                <a-table-summary-cell></a-table-summary-cell>
                                            </a-table-summary-row>
                                        </a-table-summary>
                                    </template>
                                    <template #bodyCell="{ column, text, record }">
                                        <template v-if="column.dataIndex == 'name'">
                                            <a-input
                                                v-model:value="record.name"
                                                @change="changeGBody('name', record)"
                                                placeholder="添加参数"
                                                :status="record.name.trim() == '' && !record.isInner ? 'error' : ''"
                                            >
                                            </a-input>
                                        </template>
                                        <template v-else-if="column.dataIndex == 'value'">
                                            <a-input
                                                v-model:value="record.value"
                                                @change="changeGBody('value', record)"
                                                placeholder="添加参数值"
                                                :disabled="record.isInner"
                                            >
                                                <template #suffix v-if="!record.isInner">
                                                    <div class="f_row" style="gap: 8px">
                                                        <a-tooltip placement="bottom" color="var(--Primary-2)">
                                                            <template #title>智能数据</template>
                                                            <magic
                                                                theme="outline"
                                                                size="14"
                                                                class="mouse-pointer"
                                                                fill="var(--character-60)"
                                                            />
                                                        </a-tooltip>

                                                        <a-tooltip placement="bottom" color="var(--Primary-2)">
                                                            <template #title>放大展示</template>
                                                            <stretching
                                                                theme="outline"
                                                                size="14"
                                                                class="mouse-pointer"
                                                                fill="var(--character-60)"
                                                            />
                                                        </a-tooltip>
                                                    </div>
                                                </template>
                                            </a-input>
                                        </template>
                                        <template v-else-if="column.dataIndex == 'desc'">
                                            <a-input
                                                v-model:value="record.desc"
                                                @change="changeGBody('desc', record)"
                                                placeholder="说明"
                                                :disabled="record.isInner"
                                            >
                                                <template #suffix v-if="!record.isInner">
                                                    <div class="f_row" style="gap: 8px">
                                                        <a-tooltip placement="bottom" color="var(--Primary-2)">
                                                            <template #title>放大展示</template>
                                                            <stretching
                                                                theme="outline"
                                                                size="14"
                                                                class="mouse-pointer"
                                                                fill="var(--character-60)"
                                                            />
                                                        </a-tooltip>
                                                    </div> </template
                                            ></a-input>
                                        </template>
                                        <template v-else-if="column.dataIndex == 'opt'">
                                            <a-popconfirm
                                                title="确认删除吗？"
                                                ok-text="是"
                                                cancel-text="否"
                                                v-if="!record.isInner"
                                                @confirm="changeGBody('delete', record)"
                                            >
                                                <a-button type="link" size="small">删除</a-button>
                                            </a-popconfirm>
                                        </template>
                                        <template v-else-if="column.dataIndex == 'isMust'">
                                            <a-checkbox
                                                v-model:checked="record.isMust"
                                                :disabled="record.isInner"
                                                @change="changeGBody('isMust', record)"
                                            />
                                        </template>
                                        <template v-else-if="column.dataIndex == 'isEncode'">
                                            <a-checkbox
                                                v-model:checked="record.isEncode"
                                                :disabled="record.isInner"
                                                @change="changeGBody('isEncode', record)"
                                            />
                                        </template>
                                    </template>
                                </a-table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
:where(.left_kuang) {
    height: 100%;
    width: 180px; /* 初始宽度 */
    justify-content: flex-start !important;
    align-items: flex-start !important;
    background: var(--Neutral-12);
    border-right: 1px solid var(--Neutral-9);
    padding: 12px;
    border-radius: 8px;
}
:where(.middle_kuang) {
    height: 100%;
    border-right: 1px solid var(--Neutral-9);
    cursor: ew-resize;
    background: var(--Neutral-12);
}
:where(.right_kuang) {
    height: 100%;
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    background: var(--Neutral-12);
    padding: 12px;
    border-radius: 8px;
}
:where(.icon) {
    width: 28px;
    height: 28px;
}
:where(.title) {
    gap: 12px;
    user-select: none;
    width: 100%;
    justify-content: flex-start !important;
    align-items: center !important;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--Neutral-9);
    box-shadow: 0 1px 0 0 var(--Neutral-9);
    padding: 12px 0 !important;

    border-radius: 8px 8px 0 0;
}
:where(.add) {
    margin-top: 12px;
    font-size: 16px !important;
    user-select: none;
    gap: 8px;
    width: 100%;
    color: var(--character-85);
    background: var(--Neutral-10);
    border: 1px solid var(--Neutral-9);
    border-radius: 6px;
    padding: 8px 12px;
    transition: background-color 0.3s, color 0.3s;
}
:where(.add:hover) {
    background: var(--Neutral-9);
    color: var(--character-100);
}
:where(.list_content) {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 4px 20px;
    font-size: 18px;
    color: var(--character-85);
    margin: 0 auto;
    background: var(--Neutral-12);
    border-radius: 8px;
}
:where(.right_content) {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    background: var(--Neutral-12);
    padding: 12px;
    border-radius: 8px;
}
:where(.ppp) {
    margin-top: 0px;
    width: 100%;
    margin-top: 0px;
    width: 100%;
    background: var(--Neutral-12);
    padding: 12px;
    border-radius: 8px;
}
:where(.itemOptions) {
    margin: 0px 20px !important;
    margin-bottom: 1px !important;
    background: var(--Neutral-12);
    border-radius: 8px;
}
:where(.right_info) {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    width: 100%;
    max-width: 1080px;
    margin: 8px;
    overflow-y: auto;
    background: var(--Neutral-12);
    border-radius: 8px;
    padding: 12px;
}
:where(.item) {
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.3s;
    border-radius: 6px;
    margin: 4px 0px;
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 40px;
    background: var(--Neutral-11);
    color: var(--character-85);
    border: 1px solid var(--Neutral-9);
}
:where(.item:hover) {
    background: var(--Neutral-10);
}

:where(.itemActive) {
    background: var(--Primary-6);
    color: var(--character-100);
}

:where(.itemActive:hover) {
    background: var(--Primary-8);
    color: var(--character-100);
}
:where(.envActive) {
    color: var(--Primary-8);
    border: 1px solid var(--Primary-8) !important;
    background: var(--Neutral-10);
}
:where(.env) {
    padding: 4px 8px;
    cursor: pointer;
    transition: background-color 0.3s;
    border-radius: 6px;
    margin: 4px 0px;
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 32px;
    font-size: 16px;
    background: var(--Neutral-11);
    color: var(--character-85);
    border: 1px solid var(--Neutral-9);
}

:where(.env:hover) {
    background: var(--Neutral-10);
}
</style>
<style>
.ant-collapse {
    width: 100% !important;
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
}
</style>
